JypyterLab User Interface

*** Settings ***

Library  SeleniumLibrary
Library  SeleniumScreenshots

*** Variables ***

${token}  e464f8278a8658d607c3061ca63155fdda618ec601f52c18

*** Keywords ***

Open url
    [Arguments]  ${url}
    ${status} =  Run keyword and return status  Switch browser  singleton
    Run keyword if  ${status} == False
    ...  Open browser  ${url}  alias=singleton  ELSE  Go to  ${url}
    Set window size  1024  768

*** Keywords ***

Run Selenium keyword and return status
    [Arguments]  ${keyword}  @{arguments}
    ${tmp}=  Register keyword to run on failure  No operation
    ${status}=  Run keyword and return status  ${keyword}  @{arguments}
    Register keyword to run on failure  ${tmp}
    [Return]  ${status}

*** Tasks ***

Open JupyterLab
    Open url  http://localhost:8888/lab
    ${requires token}=  Run selenium keyword and return status
    ...  Page should contain element  id:password_input
    Run keyword if  ${requires token}
    ...  Input text  id:password_input  ${token}
    Run keyword if  ${requires token}
    ...  Click button  id:login_submit
   Wait until element is visible  id:launcher-0
   Wait until element is not visible  id:jupyterlab-splash

Log | Report

By default, JupyterLab starts with its Launcher tab open on its tabbed editor. Launcher lists shortcut icons for creating a new notebook with any of the currently available kernels.

Alternatively, an existing notebook could be opened from the File browser available on the left sidebar.

*** Tasks ***

Annotate main page
    ${n1}=  Add note
    ...  id:filebrowser
    ...  text=File browser
    ${n2}=  Add note
    ...  id:launcher-0
    ...  position=top
    ...  text=Tabbed editor
    ${n3}=  Add note
    ...  css:DIV.jp-Launcher-section:nth-child(2) > DIV.jp-Launcher-cardContainer
    ...  text=Available kernels
    Capture page screenshot
    Remove elements  ${n1}  ${n2}  ${n3}

Log | Report

true

*** Tasks ***

Create new Robot notebook
    Double click element
    ...  css:LI.jp-DirListing-item:nth-child(9) > SPAN.jp-DirListing-itemText
    Wait until page contains
    ...  Robot Framework Jupyter example
    Sleep  2s

Log | Report

Launching a new notebook or loading an existing one opens the notebook on a new tab on its tabbed editor. Each notebook tab has its own toolbar with the most important actions and its bound kernel name. A simple notebook is displayed with its Markdown cells, code cells and their results. On the left side of each cell is its execution number, or empty brackets, when the cell has not been successfully executed yet.

*** Tasks ***

Annotate Robot notebook
    ${n1}=  Add pointy note
    ...  css:DIV.p-TabBar-tabIcon.jp-FolderIcon.jp-SideBar-tabIcon
    ...  text=Toggle sidebar
    ...  position=right
    ${n2}=  Add pointy note
    ...  css:DIV.p-Widget.jp-Toolbar.jp-NotebookPanel-toolbar > DIV.p-Widget.jp-ToolbarButton.jp-Toolbar-item:nth-child(4) > BUTTON.jp-ToolbarButtonComponent
    ...  position=bottom
    ...  text=Notebook toolbar
    ${n3}=  Add note
    ...  jquery:a:contains('Report')
    ...  text=Execution results
    ...  position=bottom
    ${n4}=  Add note
    ...  id:Robot-Framework-Jupyter-example
    ...  text=Markdown cell
    ...  position=right
    ${n5}=  Add note
    ...  jquery:PRE.CodeMirror-line:contains('SeleniumLibrary')
    ...  text=Code cell
    ...  position=right
    ${n6}=  Add note
    ...  jquery:PRE.CodeMirror-line:contains('Open url')
    ...  text=Code cell
    ${n7}=  Add note
    ...  jquery:PRE.CodeMirror-line:contains('Show the new')
    ...  text=Code cell
    ${n8}=  Add pointy note
    ...  css:BUTTON.jp-Toolbar-kernelName.jp-ToolbarButtonComponent
    ...  text=Notebook kernel
    ...  position=bottom
    ${n9}=  Add pointy note
    ...  jquery:.jp-InputPrompt:contains('[1]')
    ...  text=Execution number
    ...  position=top
    ${n10}=  Add pointy note
    ...  jquery:.jp-InputPrompt:contains('[2]')
    ...  text=Execution number
    ...  position=top
    ${n11}=  Add pointy note
    ...  jquery:.jp-InputPrompt:contains('[3]')
    ...  text=Execution number
    ...  position=top
    Align elements horizontally
    ...  ${n4}  ${n3}  ${n5}  ${n6}  ${n7}
    Capture page screenshot
    Remove elements
    ...  ${n1}  ${n2}  ${n3}  ${n4}  ${n5}
    ...  ${n6}  ${n7}  ${n8}  ${n9}  ${n10}
    ...  ${n11}

Log | Report

true

Finally, JupyterLab includes Inspector tool that can display context aware code inspection information provided by the current kernel. For example, robotkernel uses inspector for displaying context aware documentation, especially documentation of the currently used keyword.

Inspector can be opened from the context menu, which itself can be opened with right mouse click on a notebook. Inspector is opened as a separate tab, which can be dragged onto right or bottom side of the window – whichever suits best.

*** Tasks ***

Show inspection menuitem
    Open context menu
    ...  id:Robot-Framework-Jupyter-example
    Highlight
    ...  jquery:.p-Menu-itemLabel:contains('Open Inspector')
    ${n1}=  Add note
    ...  jquery:.jp-InputPrompt:contains('[1]')
    ...  text=1) Right click on notebook to open the context menu.
    ...  width=300
    ${n2}=  Add note
    ...  jquery:.jp-InputPrompt:contains('[2]')
    ...  text=2) Select Open Inspector from the context menu.
    ...  width=300
    ${n3}=  Add note
    ...  jquery:.jp-InputPrompt:contains('[3]')
    ...  text=3) Drag the new Inspector tab onto preferred location.
    ...  width=300
    Capture page screenshot
    Clear highlight
    ...  jquery:.p-Menu-itemLabel:contains('Open Inspector')
    Remove elements  ${n1}  ${n2}  ${n3}
    Click element  jquery:.p-Menu-itemLabel:contains('Open Inspector')

Log | Report

*** Tasks ***

Open inspector and drag it to the right
    Double click element  jquery:.p-Menu-itemLabel:contains('Open Inspector')
    Wait until element is visible
    ...  css:LI.p-TabBar-tab.jp-mod-current.p-mod-closable.p-mod-current > DIV.p-TabBar-tabLabel
    Drag and drop by offset
    ...  css:LI.p-TabBar-tab.jp-mod-current.p-mod-closable.p-mod-current > DIV.p-TabBar-tabIcon
    ...  300  300
    ${n1}=  Add note
    ...  id:jp-inspector
    ...  text=Sticky Inspector tab for displaying context aware information.
    ...  width=300
    Capture page screenshot
    Remove elements  ${n1}

Log | Report

true

*** Settings ***

Suite teardown  Close all browsers